<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.计时事件</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button onclick="handlerChangeDiv()">点击</button>
    <button id="codeNode">发送验证码</button>
    <div id="divNode"></div>
    <script>
        /*
           flag =  setTimeout(函数,毫秒值)  过多好毫秒之后该函数能执行  只执行一次
          flag = setInterval(函数,毫秒值) 每隔多少毫秒之后该函数才能执行
          清除定时器 
             clearInterval(flag)
             clearTimeout(flag)

          函数： 匿名函数 
                 有名函数
                 "函数调用"
        */
        function handlerChangeDiv() {
            // setTimeout(function () {
            //     divNode.style.backgroundColor = 'blue'
            // }, 1000)
            // setTimeout(changeColor, 1000)
            setTimeout("changeColor()", 1000)
        }

        function changeColor() {
            divNode.style.backgroundColor = 'blue'
        }

        codeNode.onclick = function () {
            var count = 10;
            this.innerHTML = count + "s"
            var flag = setInterval(function () {
                count--;
                console.log(this);
                this.innerHTML = count + "s"
                if (count === 0) {
                    clearInterval(flag)
                }
            }.bind(this), 1000)
        }
    </script>

</body>

</html>